<style lang="scss" src="./index.scss" scoped></style>
<template>
    <div class="home-fast-list-box">
        <div class="home-fast-list__label">功能列表</div>
        <div class="home-fast-list__info">
            <div class="home-fast-list__info-box">
                <ul class="home-fast-list__ul">
                    <template v-for="(item, $i) in list">
                        <fast-item
                            :item="item"
                            :key="$i"
                            @item-click="handleItemClick(item, 'edit')"
                            @item-remove="handleItemClick(item, 'remove')"
                        ></fast-item>
                    </template>
                </ul>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import FastItem from "./item.vue";

@Component({
    components: {
        FastItem
    }
})
export default class FastList extends Vue {
    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly list!: any[];

    handleItemClick(item: any, type: string) {
        this.$emit("item-click", item, type);
    }
}
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

// .home-fast-list-box {
//     background-color: #ffff;
//     margin-top: 10px;
//     display: flex;
//     .home-fast-list__label {
//         width: 200px;
//     }
// }
.home-fast-list__info-box {
    height: 200px;
    ul {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding-left: 48px;
    }
}
</style>
